<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .table {
            border: 1px solid #ddd;
            border-collapse: collapse;
        }

        .table thead tr th,
        .table tbody tr td {
            padding: 8px 12px;
            text-align: center;
            color: #333;
            border: 1px solid #ddd;
            border-collapse: collapse;
            background-color: #fff;
        }

    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small" :model="searchForm">
                        <el-form-item label="物资名称">
                            <el-input placeholder="请输入" style="width: 150px;" v-model="materialName"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="btnSearch">查询</el-button>
                            <el-button type="success" @click="btnAdd">新增</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </el-col>
            <el-table :data="tableData"  :border="true" size="mini" height="650" style="width: 100%;margin-bottom: 50px">
                <el-table-column
                        type="index"
                        width="120" label="序号">
                </el-table-column>
                <el-table-column
                        prop="materialName"
                        label="物资名称"
                >
                </el-table-column>
                <el-table-column
                        prop="bigClass"
                        label="物资大类"
                >
                </el-table-column>
                <el-table-column
                        prop="smallClass"
                        label="子类别"
                >
                </el-table-column>
                <el-table-column
                        prop="useOf"
                        label="使用方法"
                >
                </el-table-column>
                <el-table-column
                        prop="attentions"
                        label="注意事项"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="操作"
                        width="180"
                >
                    <template slot-scope="scope">
                        <el-button @click="btnEdit(scope.row)" round size="small"
                                   icon="el-icon-edit"></el-button>
                        <el-button round icon="el-icon-delete" size="small"
                                   @click="deleteClick(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-footer">
                <el-pagination background layout="prev, pager, next" :pagesize="pagesize"
                               :total="totalCount"
                               :current-page.sync="pageno" @current-change="onChangePage">
                </el-pagination>
            </div>
        </el-row>

        <el-dialog :title="editMod?'编辑':'新增'" :visible.sync="addVisible" :show-close="false" width="40%"
                   style="display: none">
            <el-form :model="addForm">
                <el-form-item label="物资名称">
                    <el-input placeholder="请输入" style="width: 80%;" v-model="addForm.materialName"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="物资大类">
                            <el-select style="width: 65%" v-model="bigClassId" @change="selectOne">
                                <el-option
                                        v-for="item in options"
                                        :key="item.Id"
                                        :label="item.bigClass"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="子类别">
                            <el-select style="width: 65%" v-model="smallClassId">
                                <el-option
                                        v-for="item in options1"
                                        :key="item.Id"
                                        :label="item.smallClass"
                                        :value="item.Id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="使用方法">
                    <el-input placeholder="请输入" type="textarea" style="width: 80%;" v-model="addForm.useOf"></el-input>
                </el-form-item>
                <el-form-item label="注意事项">
                    <el-input placeholder="请输入" type="textarea" style="width: 80%;"
                              v-model="addForm.attentions"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="addCancel()">取消</el-button>
                    <el-button type="primary" @click="addSubmit()"
                               style="text-align: center">确定</el-button>
            </span>
        </el-dialog>
    </div>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>


<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            searchForm: {},
            tableData: [],
            pagesize: 10,
            pageno: 1,
            totalCount: 10,
            addVisible: false,
            addForm: {},
            TypeContent: [],
            options: [],
            bigClass: '',
            options1: [],
            bigClassId: '',
            smallClassId: '',
            ClassData: [],
            editMod: false,
            materialName: ''
        },
        methods: {
            btnEdit(row) {
                this.addForm = Object.assign({}, row);
                // this.addForm = row;
                this.bigClassId = row.BigClassId;
                this.smallClassId = row.SmallClassId;
                this.selectOne(row.BigClassId);
                this.addVisible = true;
                this.editMod = true;
            },
            deleteClick(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('EmergenceSupplies/EmergenceManageDelete', {Id: row.Id}).success((res) => {
                        if (res.state == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getMaterialList();
                        }
                        else {
                            this.$message({
                                type: 'info',
                                message: res.errMsg
                            });
                        }

                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addSubmit() {
                let param = {};
                if (!this.addForm.materialName) {
                    this.$message.error('物资名称不能为空!');
                    return;
                }
                if (!this.bigClassId) {
                    this.$message.error('物资大类不能为空!');
                    return;
                }
                if (!this.smallClassId) {
                    this.$message.error('物资小类不能为空!');
                    return;
                }

                if (!this.addForm.useOf) {
                    this.$message.error('使用方法不能为空!');
                    return;
                }
                if (!this.addForm.attentions) {
                    this.$message.error('注意事项不能为空!');
                    return;
                }
                param.materialName = this.addForm.materialName;
                param.BigClassId = this.bigClassId;
                param.SmallClassId = this.smallClassId;
                param.useOf = this.addForm.useOf;
                param.attentions = this.addForm.attentions;
                if (this.editMod) {
                    param.Id = this.addForm.Id;
                    HttpUtil.get('EmergenceSupplies/EmergenceManageUpdate', param).success((r) => {
                        this.addCancel();
                        this.getMaterialList();
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    })
                } else {
                    param.projectNo = SiteConfig.account.projectNo;
                    HttpUtil.get('EmergenceSupplies/EmergenceManageAdd', param).success((r) => {
                        this.addCancel();
                        this.getMaterialList();
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                    })
                }
            },
            selectOne(id) {

                var param = {};
                param.pageno = 1;
                param.pagesize = 1000;
                param.bigClassId = id;

                HttpUtil.get('EmergenceSupplies/SmallClassList', param).success((r) => {
                    if (r.state == 0) {
                        this.options1 = r.data;
                    } else {
                        this.$message.warning('错误' + r.errMsg)
                    }

                })
                // this.smallClassId = '';
                // var row = this.ClassData;
                // for (var i = 0; i < row.length; i++) {
                //     if (row[i].bigClassId == this.bigClassId) {
                //         this.options1 = row[i].data;
                //     }
                // }
            },
            getMaterialList() {
                var param = {};
                if (this.materialName)
                    param.materialName = this.materialName;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                param.projectNo = SiteConfig.account.projectNo;
                HttpUtil.get('EmergenceSupplies/EmergenceManageList', param).success((r) => {
                    if (r.state == 0) {
                        this.tableData = r.data;
                        this.totalCount = r.total;
                        this.$forceUpdate();
                    } else {
                        this.$message.warning('错误' + r.errMsg)
                    }
                })
            },
            getClassList() {
                var param = {};
                param.pageno = 1;
                param.pagesize = 1000;
                param.projectNo = SiteConfig.account.projectNo;
                HttpUtil.get('EmergenceSupplies/BigClassList', param).success((r) => {
                    if (r.state == 0) {
                        this.ClassData = r.data;
                        this.options = r.data;
                    } else {
                        this.$message.warning('错误' + r.errMsg)
                    }
                })
            },
            btnSearch() {
                this.getMaterialList();
            },
            addCancel() {
                this.addVisible = false;
                this.addForm = {};
            },
            btnAdd() {
                this.addVisible = true;
                this.bigClassId = '';
                this.smallClassId = '';
                this.editMod = false;
            },
            delTypeContent(index) {
                this.TypeContent.splice(index, 1);
            },
            addTypeContent() {
                this.TypeContent.push({content: ''});
            },

            onChangePage(page) {
                this.pageno = page;
                this.getMaterialList();
            },
        },
        created: function () {
            $('.page').show();
            let proNo = HttpUtil.getQueryString('projectNo');
            if (proNo) SiteConfig.account.projectNo = proNo;
        },
        mounted: function () {
            this.getClassList();
            this.getMaterialList();

        }
    });


</script>

</body>
</html>
